.liveIcon {
  @apply w-5 h-3 relative inline-flex items-end justify-center mr-1;
  margin-left: 0.625rem;

  & > span {
    @apply inline-block bg-theme;
    width: 0.125rem;
    height: 0.4375rem;
    animation: line-animation 1.5s ease-in-out infinite;
    &:not(:first-child) {
      margin-left: 0.1875rem;
    }
    &:nth-child(2) {
      @apply h-3;
      left: 0.5625rem;
      animation-delay: 0.25s;
    }
    &:last-child {
      height: 0.3125rem;
      animation-delay: 0.5s;
      left: 0.875rem;
    }
  }
  &.vod {
    & > span {
      background: #7c3c19;
    }
  }

  @keyframes line-animation {
    0% {
      transform: scaleY(0.1);
    }

    50% {
      transform: scaleY(0.9);
    }

    100% {
      transform: scaleY(0.1);
    }
  }
}
